<template>
  <Row style="padding:20px">
    <div style="color: rgb(27, 76, 184);margin-bottom: 15px">
      <div class="addressIcon"></div>
      <span>当前位置：</span>
      <span style="cursor: pointer" @click="returnPage">操作员轨迹</span>
      <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
      <span style="color: #333">{{ nickname }}</span>
    </div>
    <!-- <h4 style="margin-bottom: 10px">历史学习记录</h4> -->
    <Col span="24" style="">
      <div class="home-top">
        <div class="middle-right">
          <div
            style="color: #333;font-size: 18px;font-weight: 600;display: flex;justify-content: space-between;"
          >
            <span>竞争力分析</span>
            <div style="font-size:12px;font-weight: 600;">
              综合评分
              <span style="color: #333;font-size: 16px;font-weight: 600"> {{ totals }} </span>，超过
              <span style="color: #333;font-size: 16px;font-weight: 600"> {{ per }}% </span>的用户
            </div>
          </div>
          <div id="competitive"></div>
        </div>
        <div class="study-data-wrap">
          <div class="study-data-wraps">
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/积分.png" alt="" />
                <span>
                  {{ this.integralDetail.userIntegral }}
                </span>
              </div>
              <div class="study-text">积分</div>
            </div>
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/积分名次.png" alt="" />
                <span>
                  {{ this.integralDetail.rank }}
                </span>
              </div>
              <div class="study-text">积分名次</div>
            </div>
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/已学课件.png" alt="" />
                <span style="cursor: pointer;" @click="showDrawer(2)">
                  {{ this.allExpCount }}
                </span>
              </div>
              <div class="study-text">已学课件</div>
            </div>
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/已学课程.png" alt="" />
                <span style="cursor: pointer;" @click="showDrawer(1)">{{
                  this.allCourseCount
                }}</span>
              </div>
              <div class="study-text">已学课程</div>
            </div>
          </div>
          <div class="study-data-wraps">
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/参与考试.png" alt="" />
                <span style="cursor: pointer;" @click="showDrawer(3)">
                  {{ this.joinedExam.length }}
                </span>
              </div>
              <div class="study-text">参与考试</div>
            </div>
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/参与竞赛.png" alt="" />
                <span style="cursor: pointer;" @click="showDrawer(4)">
                  {{ this.allRaceCount }}
                </span>
              </div>
              <div class="study-text">参与竞赛</div>
            </div>
            <div class="study-data study-data-1">
              <div class="study-num">
                <img src="../../assets/experimenterTrack/参与演练.png" alt="" />
                <span style="cursor: pointer;" @click="showDrawer(5)">
                  {{ this.allDillCount }}
                </span>
              </div>
              <div class="study-text">参与演练</div>
            </div>
            <div class="study-data study-data-1">
              <div class="study-num">
                <img :src="getMedal(integralDetail.userMedalNum)" alt="" />
                <span
                  style="font-size: 14px;word-break: normal;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;display: inline-block;text-align: right;"
                  :title="integralDetail.userMedalNum | medalNumFilter"
                >
                  {{ integralDetail.userMedalNum | medalNumFilter }}
                </span>
              </div>
              <Tooltip :max-width="200" content="荣誉勋章一共为四个大等级10个小级，分别为初级、中级、高级、特级，勋章等级与个人积分有关，积分越高等级越高，代表一种荣誉。" placement="top">
                  <div class="study-text">荣誉勋章</div>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>
      <div class="home-middle">
        <Row style="margin-top: 20px">
          <Col span="24">
            <div class="middle-left" id="homer_Middle">
              <div class="my-flex">
                <div class="my-col col-2">
                  <span class="title">统计视图</span>
                  <div id="statistical"></div>
                </div>
                <div class="my-col col-2">
                  <span class="title">能力积分</span>
                  <div id="integral"></div>
                </div>
              </div>
              <div class="my-flex">
                <div class="my-col col-2">
                  <span class="title">学习覆盖程度</span>
                  <div id="process"></div>
                </div>
                <div class="my-col col-2">
                  <span class="title">技能树学习程度</span>
                  <div id="skilltree"></div>
                </div>
              </div>
              <div class="my-flex">
                <div class="my-col col-3">
                  <span class="title">考试成绩</span>
                  <div class="mygrades">
                    <div style="color: #333;font-size: 20px;font-weight: 600"></div>
                    <div style="color: #999">
                      <Badge status="processing" text="我的分数" />
                      <Badge status="warning" text="平均分数" />
                    </div>
                  </div>
                  <div v-show="showKnowCon" id="grade"></div>
                  <div v-show="showKnowImg" class="defGraphWrap">
                    <div class="defGraph"></div>
                    <div class="graphText">暂无数据</div>
                  </div>
                </div>
                <div class="my-col col-3">
                  <span class="title">知识赛</span>
                  <div v-show="showKnowCon2" id="konwDiv"></div>
                  <div v-show="showKnowImg2" class="defGraphWrap">
                    <div class="defGraph"></div>
                    <div class="graphText">暂无数据</div>
                  </div>
                </div>
                <div class="my-col col-3">
                  <span class="title">夺旗赛</span>
                  <div v-show="showKnowCon3" id="flagDiv"></div>
                  <div v-show="showKnowImg3" class="defGraphWrap">
                    <div class="defGraph"></div>
                    <div class="graphText">暂无数据</div>
                  </div>
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </Col>
    <Drawer :title="drawerTitle" width="700" v-model="drawerVal">
      <Alert type="warning" show-icon v-if="[4, 5].includes(currentType)">
        未进行积分计算的{{ currentType === 4 ? '竞赛' : '演练' }}，无法展示积分与排名
      </Alert>
      <Table
        highlight-row
        :columns="columns"
        :data="drawerData.list"
        border
        :loading="loadingTable"
      ></Table>
      <Page
        :total="drawerData.total"
        show-elevator
        showTotal
        style="text-align: right; margin-top: 10px;"
        :current="drawerQuery.pageIndex"
        :page-size="drawerQuery.pageSize"
        @on-change="changePage"
        v-if="drawerData.total > 0"
      />
    </Drawer>
  </Row>
</template>
<script>
import $ from 'jquery';
import G2 from '@antv/g2';
import DataSet from '@antv/data-set';
import encryption from '@/libs/encryption.js';
import {
  getUserExam,
  getRourse,
  getCompetStatic,
  getCompetStaticNew,
  getMyExamGrade,
  statisticsExp,
  statisticsDrillAndRace,
  getAllScore,
  getPrjList,
  getCompositeScoreList
} from '@/api/experimenterTrack.js';
import {
  getCourseStatistics,
  getExpStatistics,
  getExamStatistics,
  getSceneStatistics
} from '@/api/excellentStudent';
import { parseDifficulty } from '@/libs/utils';
import { getStatisticsData, queryStudentIntegral, querySkillTreeCovered } from '@/api/homer';
export default {
  components: {},
  data() {
    return {
      // 用户信息
      exptypeList: [],
      integralStatisticsList: [],
      USER_ID: this.$route.query.id,
      nickname: this.$route.query.name,
      USER_NAME: this.$route.query.username,
      avatar: '',
      fullHeight: document.documentElement.clientHeight,
      leftHei: '0px',
      taskHei: '0px',
      classBool: true,
      expBool: false,
      videoBool: false,
      visiblePop: false,
      showNotice: false,
      // 参与的考试
      joinedExam: [],
      // 已学课程
      allCourseCount: 0,
      // 已学课件
      allExpCount: 0,
      //已参加竞赛
      allRaceCount: 0,
      //已参加的演练
      allDillCount: 0,
      // 已看视频
      videoLookedNum: 0,
      // 左下角占比
      total: 0,
      learned: 0,
      proportion: 0,
      tabsName: 'course',
      // 考试任务列表
      surfaceTaskList: [],
      taskType: '0',
      queryType: 0,
      queryStime: '',
      queryEtime: '',
      // 考试成绩图表数据
      examChartData: [],
      examChart: '',
      // 无数据默认图片
      showDefImg: false,
      showRightTaskList: false,
      per: 0,
      totals: 0,
      totalExp: 0,
      totalCourse: 0,
      // 第一个图
      showKnowCon: false,
      showKnowImg: false,
      showKnowImg2: false,
      showKnowCon2: false,
      showKnowImg3: false,
      showKnowCon3: false,
      ws: {},
      // 参与的训练
      trainNum: 0,
      // 夺旗赛和知识赛成绩图
      knowData: [],
      drawerVal: false,
      currentType: 1,
      integralDetail: {
        userIntegral: 0,
        rank: 0,
        userMedalNum: 0
      },
      medal0: require('@/view/experimenterTrack/imgs/medal-0.png'),
      medal1: require('@/view/experimenterTrack/imgs/medal-1.png'),
      medal2: require('@/view/experimenterTrack/imgs/medal-2.png'),
      medal3: require('@/view/experimenterTrack/imgs/medal-3.png'),
      medal4: require('@/view/experimenterTrack/imgs/medal-4.png'),
      medal5: require('@/view/experimenterTrack/imgs/medal-5.png'),
      medal6: require('@/view/experimenterTrack/imgs/medal-6.png'),
      medal7: require('@/view/experimenterTrack/imgs/medal-7.png'),
      medal8: require('@/view/experimenterTrack/imgs/medal-8.png'),
      medal9: require('@/view/experimenterTrack/imgs/medal-9.png'),
      medal10: require('@/view/experimenterTrack/imgs/medal-10.png'),
      drawerQuery: {
        pageIndex: 1,
        pageSize: 10
      },
      drawerData: {
        list: [],
        total: 0
      },
      loadingTable: false,
      columns: [
        {
          title: '课程名称',
          key: 'name',
          tooltip: true
        },
        {
          title: '难度',
          key: 'difficulty',
          tooltip: true,
          render: (h, params) => {
            let difficulty = params.row.difficulty;
            let obj = parseDifficulty(difficulty);
            return h(
              'span',
              {
                style: {
                  color: obj.color
                }
              },
              obj.text
            );
          }
        },
        {
          title: '基础分',
          key: 'basicScore',
          tooltip: true
        },
        {
          title: '奖励分',
          key: 'rewardScore',
          tooltip: true
        },
        {
          title: '学习状态',
          key: 'studyStatus',
          tooltip: true
        }
      ]
    };
  },
  computed: {
    drawerTitle() {
      switch (this.currentType) {
        case 1:
          return '已学课程';
        case 2:
          return '已学课件';
        case 3:
          return '参与考试';
        case 4:
          return '参与竞赛';
        case 5:
          return '参与演练';
      }
    }
  },
  watch: {
    currentType(type) {
      switch (type) {
        case 1:
          this.columns = [
            {
              title: '课程名称',
              key: 'name',
              tooltip: true
            },
            {
              title: '难度',
              key: 'difficulty',
              tooltip: true,
              render: (h, params) => {
                let difficulty = params.row.difficulty;
                let obj = parseDifficulty(difficulty) || {};
                return h(
                  'span',
                  {
                    style: {
                      color: obj.color
                    }
                  },
                  obj.text
                );
              }
            },
            {
              title: '基础分',
              key: 'basicScore',
              tooltip: true
            },
            {
              title: '奖励分',
              key: 'rewardScore',
              tooltip: true
            },
            {
              title: '学习状态',
              key: 'studyStatus',
              tooltip: true
            }
          ];
          break;
        case 2:
          this.columns = [
            {
              title: '课件名称',
              key: 'name',
              tooltip: true
            },
            {
              title: '课件类型',
              key: 'type',
              tooltip: true,
              render: (h, params) => {
                return h(
                  'span',
                  {
                    style: {
                      color:
                        params.row.type === 0
                          ? '#19be6b'
                          : params.row.type === 1
                          ? '#2db7f5'
                          : '#ff9900'
                    }
                  },
                  params.row.type === 0
                    ? '实操课件'
                    : params.row.type === 1
                    ? '理论课件'
                    : '文本课件'
                );
              }
            },
            {
              title: '难度',
              key: 'difficulty',
              tooltip: true,
              render: (h, params) => {
                let difficulty = params.row.difficulty;
                let obj = parseDifficulty(difficulty);
                return h(
                  'span',
                  {
                    style: {
                      color: obj.color
                    }
                  },
                  obj.text
                );
              }
            },
            {
              title: '基础分',
              key: 'basicScore',
              tooltip: true
            },
            {
              title: '奖励分',
              key: 'rewardScore',
              tooltip: true
            },
            {
              title: '学习状态',
              key: 'studyStatus',
              tooltip: true
            }
          ];
          break;
        case 3:
          this.columns = [
            {
              title: '考试名称',
              key: 'examinationName',
              tooltip: true
            },
            {
              title: '试卷名称',
              key: 'paperName',
              tooltip: true
            },
            {
              title: '类型',
              key: 'type',
              tooltip: true,
              render: (h, params) => {
                return h(
                  'span',
                  {
                    style: {
                      color:
                        params.row.type === 0
                          ? '#19be6b'
                          : params.row.type === 1
                          ? '#2db7f5'
                          : '#ff9900'
                    }
                  },
                  params.row.type === 0 ? '考试' : params.row.type === 1 ? '自测' : '培训'
                );
              }
            },
            {
              title: '基础分',
              key: 'basicScore',
              tooltip: true
            },
            {
              title: '奖励分',
              key: 'rewardScore',
              tooltip: true
            },
            {
              title: '成绩',
              key: 'grade',
              tooltip: true,
              render: (h, params) => {
                let grade = params.row.grade;
                return h('span', !grade && grade !== 0 ? '未提交' : grade);
              }
            },
            {
              title: '完成时间',
              key: 'endTime',
              tooltip: true
            }
          ];
          break;
        case 4:
        case 5:
          this.columns = [
            {
              title: `${type === 4 ? '竞赛' : '演练'}名称`,
              key: 'name',
              tooltip: true
            },
            {
              title: '积分',
              key: 'personalIntegral',
              tooltip: true,
              render: (h, params) => {
                let personalIntegral = params.row.personalIntegral;
                return h(
                  'span',
                  !personalIntegral && personalIntegral !== 0 ? '-' : personalIntegral
                );
              }
            },
            {
              title: '排名',
              key: 'personalRank',
              tooltip: true,
              render: (h, params) => {
                let personalRank = params.row.personalRank;
                return h('span', !personalRank && personalRank !== 0 ? '-' : personalRank);
              }
            },
            {
              title: '完成度',
              key: 'rate',
              tooltip: true,
              render: (h, params) => {
                return h('span', `${params.row.rate}%`);
              }
            },
            {
              title: `${type === 4 ? '竞赛' : '演练'}类型`,
              key: 'type',
              tooltip: true,
              render: (h, params) => {
                return h('span', this.parseScene(params.row.type));
              }
            },
            {
              title: '开始时间',
              key: 'startTime',
              tooltip: true
            },
            {
              title: '结束时间',
              key: 'endTime',
              tooltip: true
            }
          ];
          break;
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.refreshTimer);
    window.removeEventListener('resize', this.setStyle);
  },
  mounted() {
    this.getExamList(); //参与考试
    this.getDrillAndRace(); //参与竞赛
    // 竞赛图
    this.comAllScore();
    this.leftHei = this.fullHeight - 145 + 'px';
    this.taskHei = 1160 - 505 + 'px';
    // 下拉列表变成圆角
    $('.ivu-select-selection').css({
      'border-radius': '20px'
    });
    $('.ivu-divider-horizontal').css({
      margin: '10px 0'
    });
    $('.ivu-tag').css({
      padding: '0 4px',
      'border-radius': '10px',
      height: '18px'
    });
    $('.ivu-tag-red').css({
      'line-height': '18px'
    });
    this.calcData();
    $('.middle-left .ivu-tabs-nav-prev').click(() => {
      this.calcData();
    });
    $('.middle-left .ivu-tabs-nav-next').click(() => {
      this.calcData();
    });
    //竞争力统计图
    this.getCompetStatic();
    //试验知识点
    this.getExpStatic();
    //我的考试图接口
    this.getMyExamGrade();
    //课件类型饼状图接口
    this.queryExperimentType();
    this.queryStudentIntegral();
    this.querySkillTreeCovered();
    // 获取资源：课程和课件
    this.getSourseData();
    this.getIntegralDetail();
    this.setStyle(); // 计算分页大小后，获取场景列表
    window.addEventListener('resize', this.setStyle);
  },
  created() {
    //this.getBoardLists();
  },
  filters: {
    medalNumFilter(num) {
      if (num > 10) {
        num = 10;
      }
      switch (num) {
        case 0:
          return '新手';
        case 1:
          return '初级一级';
        case 2:
          return '初级二级';
        case 3:
          return '初级三级';
        case 4:
          return '初级四级';
        case 5:
          return '中级一级';
        case 6:
          return '中级二级';
        case 7:
          return '中级三级';
        case 8:
          return '高级一级';
        case 9:
          return '高级二级';
        case 10:
          return '特级';
        default:
          return;
      }
    }
  },
  methods: {
    setStyle() {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight;
        let tableHeight = clientHeight - 44 - 51 - 32 - 36; // 整体高度减去分页组件高度、头部高度、留白高度、表头高度
        if ([4, 5].includes(this.currentType)) {
          // 竞赛、演练，额外减去提示组件高度
          tableHeight -= 44;
        }
        this.drawerQuery.pageSize = Math.floor(tableHeight / 48) || 1;
        this.changePage(1);
      }, 200);
    },
    querySkillTreeCovered() {
      let _this = this;
      querySkillTreeCovered({
        userId: this.USER_ID
      }).then((res) => {
        if (res.data.code == 1) {
          let dataList = res.data.data;
          _this.skillTreeCoveredList = dataList;
        }
        this.skillCover(this.skillTreeCoveredList);
      });
    },
    skillCover(data) {
      data.forEach((item) => {
        item.process = parseFloat(item.process);
      });
      const { DataView } = DataSet;

      const dv = new DataView().source(data);
      dv.transform({
        type: 'fold',
        fields: ['process'], // 展开字段集
        // key: 'user', // key字段
        value: '完成度' // value字段
      });
      const chart = new G2.Chart({
        container: 'skilltree',
        forceFit: true,
        height: 500,
        padding: [0, 0, 50, 0]
      });
      chart.source(dv, {
        完成度: {
          min: 0,
          max: 100
        }
      });
      chart.coord('polar', {
        radius: 0.7
      });
      chart.axis('name', {
        line: null,
        tickLine: null,
        label: {
          autoRotate: false,
          autoHide: false, // 取消自动隐藏label
          formatter(text) {
            // 字符太长添加省略号
            return text.length > 10 ? `${text.slice(0, 10)}...` : text;
          }
        },
        grid: {
          lineStyle: {
            lineDash: null
          },
          hideFirstLine: false
        }
      });
      chart.axis('完成度', {
        line: null,
        tickLine: null,
        grid: {
          type: 'polygon',
          lineStyle: {
            lineDash: null
          }
        }
      });
      chart.legend('user', {
        marker: 'circle',
        offset: 30
      });
      chart
        .line()
        .position('name*完成度')
        .color('user')
        .size(2)
        .tooltip('name*完成度', (x, a) => {
          return {
            name: '完成度',
            value: `${a}%`
          };
        });
      chart
        .point()
        .position('name*完成度')
        .color('user')
        .shape('circle')
        .size(4)
        .style({
          stroke: '#fff',
          lineWidth: 1,
          fillOpacity: 1
        })
        .tooltip('name*完成度', (x, a) => {
          return {
            name: '完成度',
            value: `${a}%`
          };
        });
      chart
        .area()
        .position('name*完成度')
        .color('user')
        .tooltip('name*完成度', (x, a) => {
          return {
            name: '完成度',
            value: `${a}%`
          };
        });
      chart.render();
    },
    //积分查询
    queryStudentIntegral() {
      let _this = this;
      queryStudentIntegral({
        userId: this.USER_ID
      }).then((res) => {
        if (res.data.code == 1) {
          let dataList = res.data.data;
          _this.integralStatisticsList = dataList;
        }
        this.integralStatistics(this.integralStatisticsList);
        this.integralCover(this.integralStatisticsList);
      });
    },
    //积分统计雷达
    integralStatistics(data) {
      const { DataView } = DataSet;
      const dv = new DataView().source(data);
      dv.transform({
        type: 'fold',
        fields: ['score'], // 展开字段集
        key: 'user', // key字段
        value: '积分' // value字段
      });
      const chart = new G2.Chart({
        container: 'integral',
        forceFit: true,
        height: 500,
        padding: [0, 0, 50, 0]
      });
      chart.source(dv, {
        积分: {
          min: 0
        }
      });
      chart.coord('polar', {
        radius: 0.7
      });
      chart.axis('name', {
        line: null,
        tickLine: null,
        label: {
          autoRotate: false,
          autoHide: false, // 取消自动隐藏label
          formatter(text) {
            // 字符太长添加省略号
            return text.length > 10 ? `${text.slice(0, 10)}...` : text;
          }
        },
        grid: {
          lineStyle: {
            lineDash: null
          },
          hideFirstLine: false
        }
      });
      chart.axis('积分', {
        line: null,
        tickLine: null,
        grid: {
          type: 'polygon',
          lineStyle: {
            lineDash: null
          }
        }
      });
      chart.legend('user', {
        marker: 'circle',
        offset: 30
      });
      chart.tooltip({
        useHtml: true,
        htmlContent: function(title, items) {
          let point = items[0];
          return (
            '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">' +
            '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' +
            point.title +
            '</div>' +
            '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:#ff9900;border-radius:50%;margin-bottom: 2px;margin-right:10px;display:inline-block"></span><span>积分：</span><span style="padding-left:26px">' +
            point.value +
            '<span></li></ul>' +
            '</div>'
          );
        }
      });
      chart
        .line()
        .position('name*积分')
        .color('user')
        .size(2);
      chart
        .point()
        .position('name*积分')
        .color('user')
        .shape('circle')
        .size(4)
        .style({
          stroke: '#fff',
          lineWidth: 1,
          fillOpacity: 1
        });
      chart
        .area()
        .position('name*积分')
        .color('user');
      chart.render();
    },
    //积分统计覆盖雷达
    integralCover(data) {
      data.forEach((item) => {
        item.process = parseFloat(item.process);
      });
      const { DataView } = DataSet;

      const dv = new DataView().source(data);
      dv.transform({
        type: 'fold',
        fields: ['process'], // 展开字段集
        // key: 'user', // key字段
        value: '覆盖度' // value字段
      });
      const chart = new G2.Chart({
        container: 'process',
        forceFit: true,
        height: 500,
        padding: [0, 0, 50, 0]
      });
      chart.source(dv, {
        覆盖度: {
          min: 0,
          max: 100
        }
      });
      chart.coord('polar', {
        radius: 0.7
      });
      chart.axis('name', {
        line: null,
        tickLine: null,
        label: {
          autoRotate: false,
          autoHide: false, // 取消自动隐藏label
          formatter(text) {
            // 字符太长添加省略号
            return text.length > 10 ? `${text.slice(0, 10)}...` : text;
          }
        },
        grid: {
          lineStyle: {
            lineDash: null
          },
          hideFirstLine: false
        }
      });
      chart.axis('覆盖度', {
        line: null,
        tickLine: null,
        grid: {
          type: 'polygon',
          lineStyle: {
            lineDash: null
          }
        }
      });
      chart.legend('user', {
        marker: 'circle',
        offset: 30
      });
      chart
        .line()
        .position('name*覆盖度')
        .color('user')
        .size(2)
        .tooltip('name*覆盖度', (x, a) => {
          return {
            name: '覆盖度',
            value: `${a}%`
          };
        });
      chart
        .point()
        .position('name*覆盖度')
        .color('user')
        .shape('circle')
        .size(4)
        .style({
          stroke: '#fff',
          lineWidth: 1,
          fillOpacity: 1
        })
        .tooltip('name*覆盖度', (x, a) => {
          return {
            name: '覆盖度',
            value: `${a}%`
          };
        });
      chart
        .area()
        .position('name*覆盖度')
        .color('user')
        .tooltip('name*覆盖度', (x, a) => {
          return {
            name: '覆盖度',
            value: `${a}%`
          };
        });
      chart.render();
    },
    calcData() {
      var that = this;
      const innerW = $('.ivu-tabs-nav').css('width');
      const scrollW = $('.ivu-tabs-nav-scroll').css('width');
      setTimeout(() => {
        const translates = $('.ivu-tabs-nav').css('transform');
        if (!translates) {
          return;
        }
        const transformX = parseFloat(translates.substring(7).split(',')[4]) || 0;
        const minus = parseInt(innerW) - parseInt(scrollW);
        if (transformX == 0) {
          that.setCss('left');
        } else if (-minus == transformX) {
          that.setCss('right');
        } else {
          that.setCss();
        }
      }, 100);
    },
    setCss(flag) {
      //左边禁用
      if (flag == 'left') {
        $('.middle-left .ivu-tabs-nav-prev').css({
          cursor: 'not-allowed'
        });
        $('.middle-left .ivu-tabs-nav-next').css({
          cursor: 'auto'
        });
      }
      //右边禁用
      else if (flag == 'right') {
        $('.middle-left .ivu-tabs-nav-next').css({
          cursor: 'not-allowed'
        });
        $('.middle-left .ivu-tabs-nav-prev').css({
          cursor: 'auto'
        });
      } else {
        //都不禁用
        $('.middle-left .ivu-tabs-nav-prev').css({
          cursor: 'auto'
        });
        $('.middle-left .ivu-tabs-nav-next').css({
          cursor: 'auto'
        });
      }
    },
    parseScene(type) {
      switch (Number(type)) {
        case 0:
          return '对抗演练';
        case 1:
          return '攻防赛';
        case 2:
          return '夺旗赛';
        case 3:
          return '知识赛';
        case 4:
          return '渗透演练';
        case 5:
          return '护网演练';
        case 6:
          return '应急防御演练';
        case 7:
          return '综合演练';
        case 8:
          return '攻防赛plus';
        case 9:
          return '运维赛';
      }
    },
    dataTypeFilter(val) {
      switch (val) {
        case 0:
          return '课程';
        case 1:
          return '课件';
        case 2:
          return '视频';
        case 3:
          return '考试';
        case 4:
          return '场景';
        case 5:
          return '技能树节点';
        case 6:
          return '技能树';
      }
    },
    queryExperimentType() {
      getStatisticsData({
        userId: this.USER_ID
      }).then((data = {}) => {
        data = data.data || {};
        if (data.code === 1) {
          let list = data.data || [];
          let sum = 0;
          list.forEach((item) => {
            sum += item.totalScore;
          });
          let maxPercent;
          let sumPercent = 0;
          this.exptypeList = list.map((item) => {
            item.item = this.dataTypeFilter(item.dataType);
            let percent = Number((item.totalScore / sum).toFixed(4));
            maxPercent =
              maxPercent === undefined ? Math.max(0, percent) : Math.max(maxPercent, percent);
            sumPercent += percent;
            item.percent = percent;
            return item;
          });
          if (sumPercent !== 0) {
            // 均不为0，计算最终四舍五入的结果的误差，并由最大的一个百分比来做零和
            let diff = 1 - sumPercent;
            let item = list.find((item) => item.percent === maxPercent);
            if (item) {
              item.percent += diff;
            }
          }
          this.expTypeStatistics(this.exptypeList);
        }
      });
    },
    expTypeStatistics(data) {
      const chart = new G2.Chart({
        container: 'statistical',
        forceFit: true,
        height: 500
      });
      chart.source(data, {
        percent: {
          formatter: (val) => {
            val = (val * 100).toFixed(2) + '%';
            return val;
          }
        }
      });
      chart.coord('theta', {
        radius: 0.7
      });
      chart.tooltip({
        useHtml: true,
        htmlContent: function(title, items) {
          let point = items[0].point.point;
          return (
            '<div class="g2-tooltip" style="position:absolute;box-shadow: rgb(174 174 174) 0px 0px 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px;padding: 6px 10px;">' +
            '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' +
            point.item +
            '</div>' +
            '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:#ff9900;border-radius:50%;margin-bottom: 2px;margin-right:10px;display:inline-block"></span><span>百分比：</span><span style="padding-left:26px">' +
            (point.percent * 100).toFixed(2) +
            '%<span></li>' +
            '<li><span style="width:5px;height:5px;background:#19be6b;margin-bottom: 2px;border-radius:50%;margin-right:10px;display:inline-block"></span><span style="display: inline-block; width: 56px;">得分：</span><span style="padding-left:26px">' +
            point.totalScore +
            '</span></li></ul>' +
            '</div>'
          );
        }
      });
      chart
        .intervalStack()
        .position('percent')
        .color('item')
        .label('percent', {
          formatter: (val, item) => {
            return item.point.item + ': ' + val;
          }
        })
        // .tooltip('item*percent*totalScore', (item, percent, totalScore) => {
        // 	console.log(1111, item, percent, totalScore)
        // 	percent = (percent * 100).toFixed(2) + '%';
        // 	return {
        // 		name: item,
        // 		value: `\n百分比：${percent}\n\n\n\n\n\n\n
        // 		分数：${totalScore}`,
        // 	};
        // })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        });
      chart.render();
    },
    changePage(page) {
      this.drawerQuery.pageIndex = page || 1;
      this.getDataList(this.currentType);
    },
    getCourseStatistics() {
      this.loadingTable = true;
      getCourseStatistics({
        userId: this.USER_ID,
        page: this.drawerQuery.pageIndex,
        rows: this.drawerQuery.pageSize
      })
        .then(({ code, message, attribute }) => {
          if (code !== 1) {
            this.$Message.warning(message);
            this.drawerData.list = [];
            this.drawerData.total = 0;
            return;
          }
          this.drawerData.list = attribute.dataList || [];
          this.drawerData.total = attribute.totalCount || 0;
        })
        .catch(() => {
          this.$Message.error('查询已学课程详情异常');
        })
        .finally(() => {
          this.loadingTable = false;
        });
    },
    getExpStatistics() {
      this.loadingTable = true;
      getExpStatistics({
        userId: this.USER_ID,
        pageIndex: this.drawerQuery.pageIndex,
        pageSize: this.drawerQuery.pageSize
      })
        .then(({ code, message, attribute }) => {
          if (code !== 1) {
            this.$Message.warning(message);
            this.drawerData.list = [];
            this.drawerData.total = 0;
            return;
          }
          this.drawerData.list = attribute.dataList || [];
          this.drawerData.total = attribute.totalCount || 0;
        })
        .catch(() => {
          this.$Message.error('查询已学课件详情异常');
        })
        .finally(() => {
          this.loadingTable = false;
        });
    },
    getExamStatistics() {
      this.loadingTable = true;
      getExamStatistics({
        userId: this.USER_ID,
        page: this.drawerQuery.pageIndex,
        rows: this.drawerQuery.pageSize
      })
        .then(({ code, message, attribute }) => {
          if (code !== 1) {
            this.$Message.warning(message);
            this.drawerData.list = [];
            this.drawerData.total = 0;
            return;
          }
          this.drawerData.list = attribute.dataList || [];
          this.drawerData.total = attribute.totalCount || 0;
        })
        .catch(() => {
          this.$Message.error('查询参与考试详情异常');
        })
        .finally(() => {
          this.loadingTable = false;
        });
    },
    getSceneStatistics(type) {
      // competition: 竞赛  drill: 演练
      this.loadingTable = true;
      getSceneStatistics({
        userId: this.USER_ID,
        pageIndex: this.drawerQuery.pageIndex,
        pageSize: this.drawerQuery.pageSize,
        type: type === 'competition' ? 0 : 1
      })
        .then(({ code, message, data = {} }) => {
          if (code !== 1) {
            this.$Message.warning(message);
            this.drawerData.list = [];
            this.drawerData.total = 0;
            return;
          }
          this.drawerData.list = data.items || [];
          this.drawerData.total = data.total || 0;
        })
        .catch(() => {
          this.$Message.error(`查询参与${type === 'competition' ? '竞赛' : '演练'}详情异常`);
        })
        .finally(() => {
          this.loadingTable = false;
        });
    },
    getDataList(type) {
      switch (type) {
        case 1:
          this.getCourseStatistics();
          break;
        case 2:
          this.getExpStatistics();
          break;
        case 3:
          this.getExamStatistics();
          break;
        case 4:
          this.getSceneStatistics('competition');
          break;
        case 5:
          this.getSceneStatistics('drill');
          break;
      }
    },
    getMedal(num) {
      if (num > 10) {
        num = 10; // 最高只有十个等级
      }
      switch (num) {
        case 1:
          return this.medal1;
        case 2:
          return this.medal2;
        case 3:
          return this.medal3;
        case 4:
          return this.medal4;
        case 5:
          return this.medal5;
        case 6:
          return this.medal6;
        case 7:
          return this.medal7;
        case 8:
          return this.medal8;
        case 9:
          return this.medal9;
        case 10:
          return this.medal10;
        default:
          return this.medal0;
      }
    },
    getIntegralDetail() {
      getCompositeScoreList({
        pageIndex: 1,
        pageSize: 10,
        userName: this.USER_NAME
      }).then(({ code, message, data = {} }) => {
        if (code !== 1) {
          this.$Message.warning(message);
          return;
        }
        let item = data.items || [];
        this.integralDetail = item[0] || {};
      });
    },
    showDrawer(type) {
      // 1课程 2课件 3考试 4竞赛 5演练
      this.drawerVal = true;
      this.currentType = type;
      this.changePage(1);
    },
    //获取参与演练和竞赛的数量接口
    getDrillAndRace() {
      statisticsDrillAndRace(this.USER_ID).then((data) => {
        if (data.code === 1) {
          this.allDillCount = data.attribute.drillSceneSum;
          this.allRaceCount = data.attribute.contestSceneSum;
        }
      });
    },
    //获取我的考试成绩接口
    getMyExamGrade() {
      let _this = this;
      getMyExamGrade({ userId: this.USER_ID }).then((data) => {
        if (data.code === 1) {
          let dataList = data.attribute.data;
          dataList.forEach((item) => {
            _this.examChartData.push({
              time: item.startTime,
              type: '我的分数',
              tem: item.grade,
              name: item.examinationName || '-'
            });
            _this.examChartData.push({
              time: item.startTime,
              type: '平均分数',
              tem: item.avgScore,
              name: item.examinationName || '-'
            });
          });
          if (dataList.length === 0) {
            this.showKnowImg = true;
            this.showKnowCon = false;
          } else {
            _this.chart1();
            this.showKnowImg = false;
            this.showKnowCon = true;
          }
        }
      });
    },
    //获取竞赛竞争力统计接口
    getCompetStatic() {
      let _this = this;
      getCompetStaticNew({ userId: this.USER_ID }).then((data) => {
        if (data.code === 1) {
          let datas = data.attribute.competitiveVOList;
          this.per = data.attribute.percent;
          let totals = data.attribute.totalScore;
          this.totals = totals.toFixed(2);
          let chartData = [];
          datas.forEach((item) => {
            let obj = {};
            // obj.item = _this.filterModeMatch(item.type);
            obj.item = item.description;
            obj.score = item.score;
            chartData.push(obj);
          });
          _this.chart2(chartData);
        }
      });
    },
    filterModeMatch(mode) {
      let str = '';
      switch (mode) {
        case 2:
          str = '夺旗赛';
          break;
        case 3:
          str = '知识赛';
          break;
        case 7:
          str = '考试';
          break;
        case 8:
          str = '课件';
          break;
        case 9:
          str = '课程';
          break;
        default:
          str = '夺旗赛';
          break;
      }
      return str;
    },
    // 考试成绩统计
    chart1() {
      this.examChart = new G2.Chart({
        container: 'grade',
        forceFit: true,
        height: 520,
        padding: [30, 40, 30, 40]
      });
      this.examChart.source(this.examChartData, {
        time: {
          type: 'timeCat',
          range: [0, 1],
          mask: 'YY/MM/DD HH:mm'
        }
      });
      this.examChart.legend(false);
      this.examChart.tooltip({
        shared: true,
        crosshairs: {
          type: 'line'
        },
        useHtml: true,
        htmlContent: function(title, items) {
          return (
            '<div class="g2-tooltip" style="position:absolute;box-shadow: 1px 1px 2px 2px #eee;border-radius: 4px;padding: 6px 10px;">' +
            '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' +
            items[0].point._origin.name +
            '</div>' +
            '<ul class="g2-tooltip-list" ><li><span style="width:5px;height:5px;background:' +
            items[0].color +
            ';border-radius:50%;margin-right:16px;display:inline-block"></span>' +
            items[0].name +
            '<span style="padding-left:26px">' +
            items[0].value +
            '<span></li>' +
            '<li><span style="width:5px;height:5px;background:' +
            items[1].color +
            ';border-radius:50%;margin-right:16px;display:inline-block"></span>' +
            items[1].name +
            '<span style="padding-left:26px">' +
            items[1].value +
            '</span></li></ul>' +
            '</div>'
          );
        }
      });
      this.examChart
        .area()
        .position('time*tem')
        .color('type', [
          'l(90) 0:rgb(239, 244, 255) 1:rgb(254, 255, 255)',
          'l(90) 0:rgb(255, 248, 237) 1:rgb(254, 255, 255)'
        ])
        .tooltip(false);
      this.examChart
        .line()
        .position('time*tem')
        .color('type', ['#1890FF', 'orange'])
        .size(2);
      // 绘制的图表
      this.examChart.render();
      this.overflowResize();
    },
    // 竞争力分析
    chart2(data) {
      var _DataSet = DataSet,
        DataView = _DataSet.DataView;
      var dv = new DataView().source(data);
      dv.transform({
        type: 'fold',
        fields: ['score'], // 展开字段集
        key: 'user', // key字段
        value: 'score' // value字段
      });
      var chart = new G2.Chart({
        container: 'competitive',
        forceFit: true,
        width: 500,
        height: 320,
        padding: 'auto'
      });
      chart.source(dv, {
        score: {
          min: 0,
          max: 100
        }
      });
      chart.source(data);
      chart
        .line()
        .position('item*score')
        .shape('circle')
        .color('#5252d7')
        .size(2)
        .tooltip('item*score', (x, a) => {
          return {
            name: '分数',
            value: `${a}`
          };
        });
      chart
        .point()
        .position('item*score')
        .color('#5252d7')
        .tooltip('item*score', (x, a) => {
          return {
            name: '分数',
            value: `${a}`
          };
        });
      chart.render();
      this.overflowResize();
    },
    //获取试验知识点
    getExpStatic() {
      statisticsExp().then((data) => {
        if (data.code === 1) {
          let arr = [];
          data.data.forEach((item) => {
            let objLearn = {};
            objLearn.company = '已学';
            objLearn.type = item.typeName;
            objLearn.value = item.learnedNum;
            arr.push(objLearn);
            let objTotal = {};
            objTotal.company = '总数';
            objTotal.type = item.typeName;
            objTotal.value = item.total;
            arr.push(objTotal);
          });
          //   this.chart3(arr);
        } else {
          this.$Message.error(data.message);
        }
      });
    },
    // 知识点统计
    chart3(data) {
      var chart = new G2.Chart({
        container: 'knowledgepoints',
        forceFit: true,
        height: 410,
        padding: [30, 30, 40, 30]
      });
      chart.source(data);
      chart.scale('value', {
        alias: '占比（%）'
      });
      chart.axis('type', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        },
        tickLine: {
          alignWithLabel: false,
          length: 0
        }
      });
      chart.axis('value', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      });
      chart.legend(false);
      chart
        .interval()
        .position('type*value')
        .color('company', ['rgb(47, 112, 255)', 'orange'])
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0.4
          }
        ]);
      chart.render();
      this.overflowResize();
    },
    // 图表溢出resize
    overflowResize() {
      const e = document.createEvent('Event');
      e.initEvent('resize', true, true);
      window.dispatchEvent(e);
    },
    // 考试任务
    getExamList() {
      this.joinedExam = [];
      let params = {
        examinationName: '',
        startTime: '',
        endTime: ''
      };
      getUserExam(this.USER_ID, params)
        .then((data) => {
          if (data.code == 1) {
            let dataList = data.attribute.data;
            this.joinedExam = dataList;
            return;
          } else {
            this.$Message.warning(data.message);
          }
        })
        .catch((err) => {});
    },
    // 课件统计 课程统计
    clickClass(name) {
      this.classBool = false;
      this.expBool = false;
      this.videoBool = false;
      if (name === 'course') {
        this.classBool = true;
      } else if (name === 'exper') {
        this.expBool = true;
      } else if (name === 'video') {
        this.videoBool = true;
      }
      this.tabsName = name;
      this.getSourseData();
    },
    // 获取有多少课程课件，及学习了多少课程课件
    getSourseData() {
      getRourse(this.USER_ID)
        .then((data) => {
          if (data.code === 1) {
            let getData = data.attribute.data;
            this.allCourseCount = getData.coursedSum;
            this.allExpCount = getData.expedSum;
            this.videoLookedNum = getData.videoLookedNum;
            if (this.tabsName === 'course') {
              this.total = getData.allCourseSum;
              this.learned = getData.coursedSum;
            } else if (this.tabsName === 'exper') {
              this.total = getData.allExpSum;
              this.learned = getData.expedSum;
            } else if (this.tabsName === 'video') {
              this.total = getData.videoNum;
              this.learned = getData.videoLookedNum;
            }
            let num = 0;
            if (this.learned == 0) {
              num = 0;
            } else {
              num = (this.learned / this.total) * 100;
            }
            this.proportion = parseFloat(num.toFixed(1));
          }
        })
        .catch((err) => {});
    },
    // 场景列表
    getProList() {
      getPrjList()
        .then((data) => {
          if (data.code === 1) {
            this.trainNum = data.data.items.length;
          }
        })
        .catch((err) => {});
    },
    // 竞赛图（知识赛和夺旗赛）
    comAllScore() {
      getAllScore({ userId: this.USER_ID })
        .then((data) => {
          if (data.code === 1) {
            let items = data.attribute;
            let knowData = [];
            let flagData = [];
            for (let i = 0; i < items.length; i++) {
              let obj = {
                time: items[i].startDate,
                contestName: items[i].contestName,
                score: items[i].score
              };
              if (items[i].matchMode === '3') {
                // 知识赛
                knowData.push(obj);
              } else if (items[i].matchMode === '2' && items[i].teamName) {
                // 团体赛
                obj.name = '团体';
                flagData.push(obj);
              } else if (items[i].matchMode === '2' && items[i].teamName == undefined) {
                // 个人赛
                obj.name = '个人';
                flagData.push(obj);
              }
            }
            if (knowData.length === 0) {
              this.showKnowImg2 = true;
              this.showKnowCon2 = false;
            } else {
              this.showKnowImg2 = false;
              this.showKnowCon2 = true;
              this.chart4(knowData);
            }
            if (flagData.length === 0) {
              this.showKnowImg3 = true;
              this.showKnowCon3 = false;
            } else {
              this.showKnowImg3 = false;
              this.showKnowCon3 = true;
              this.chart5(flagData);
            }
          } else {
            this.showKnowImg2 = true;
            this.showKnowCon2 = false;
            this.showKnowImg3 = true;
            this.showKnowCon3 = false;
          }
        })
        .catch((err) => {
          this.showKnowImg2 = true;
          this.showKnowCon2 = false;
          this.showKnowImg3 = true;
          this.showKnowCon3 = false;
        });
    },
    chart4(data) {
      // 知识赛
      var chart = new G2.Chart({
        container: 'konwDiv',
        forceFit: true,
        height: 540,
        padding: [50, 40, 30, 40]
      });

      chart.source(data, {
        time: {
          type: 'timeCat',
          range: [0, 1],
          mask: 'YY/MM/DD HH:mm'
        }
      });
      chart.scale('score', {
        alias: '我的分数',
        min: 0
      });
      chart.scale('contestName', {
        alias: '竞赛名称',
        range: [0, 1]
      });
      chart.legend(false);
      chart.tooltip({
        shared: true,
        crosshairs: false
      });
      chart
        .line()
        .position('time*score')
        .tooltip('score*contestName');
      chart
        .point()
        .position('time*score')
        .size(4)
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1
        });
      chart.render();
      this.overflowResize();
    },
    chart5(data) {
      const chart = new G2.Chart({
        container: 'flagDiv',
        forceFit: true,
        height: 540,
        padding: [50, 40, 30, 40]
      });
      chart.source(data, {
        time: {
          type: 'timeCat',
          range: [0, 1],
          mask: 'YY/MM/DD HH:mm'
        }
      });
      chart.scale('score', {
        alias: '我的分数',
        min: 0
      });
      chart.scale('contestName', {
        alias: '竞赛名称',
        range: [0, 1]
      });
      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      chart.legend({
        useHtml: true,
        containerTpl:
          '<div class="g2-legend"><p style="width:150px;margin-top:2px;"><i class="g2-legend-marker" style="width:20px;height:2px;display:inline-block;margin-right:10px;margin-bottom:3px;background-color:#1890FF"></i>竞赛</p>' +
          '<div class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></div>' +
          '</div>',
        itemTpl: (value, color, checked, index) => {
          const obj = data[index];
          checked = checked ? 'checked' : 'unChecked';
          return (
            '<div class="g2-legend-list-item item-' +
            index +
            ' ' +
            checked +
            '" data-value="' +
            value +
            '" data-color=' +
            color +
            ' style="cursor: pointer;font-size: 14px;">' +
            '<i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:10px;background-color:' +
            color +
            ';"></i>' +
            '<span class="g2-legend-text">' +
            value +
            '</span>' +
            '</div>'
          );
        },
        position: 'top-right', // 设置图例的显示位置
        allowAllCanceled: true,
        'g2-legend': {
          width: '80%',
          display: 'flex'
        },
        'g2-legend-list': {
          border: 'none',
          textAlign: 'left'
        }
      });
      chart
        .line()
        .position('time*score')
        .tooltip('score*contestName');
      chart
        .point()
        .position('time*score')
        .color('contestName')
        .size(4)
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1
        });
      chart.render();
      this.overflowResize();
    },
    returnPage() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.my-flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.my-col {
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
  min-height: 300px;
}
.col-2 {
  width: calc(50% - 10px);
}
.col-3 {
  width: calc(33.3333% - 10px);
  height: 616px;
}
#homer_Middle .title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
}
/deep/ .ivu-badge-status-warning {
  background-color: tomato;
}
/deep/ .ivu-tabs-ink-bar {
  background: none;
}
/deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
  color: #303030 !important;
  font-weight: 600 !important;
}
/deep/ .ivu-tabs-nav .ivu-tabs-tab {
  color: #8e92a6;
  font-weight: 600 !important;
}
/deep/ .ivu-tabs-nav .ivu-tabs-tab:hover {
  color: #303030;
  font-weight: 600 !important;
}
/deep/ .ivu-tabs-bar {
  border-bottom: 1px dashed #dcdee2;
}
/deep/ .ivu-badge-status-dot {
  width: 4px;
  height: 4px;
}
.filter .read {
  cursor: pointer;
}
.home-top {
  width: 100%;
  height: 385px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  /* position: relative; */
}
.study-data-wrap {
  width: 56%;
  position: relative;
}
.study-data-wraps {
  width: 100%;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-between;
  /* align-content: space-between; */
}
.study-data-wraps:nth-child(2) {
  position: absolute;
  bottom: 0px;
}
.study-data {
  padding: 30px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  width: calc((100% - 40px) / 3);
  height: calc((382px - 20px) / 2);
}
.study-data.study-data-1 {
  width: calc(25% - 14px);
}
.study-num {
  margin-bottom: 64px;
  font-weight: 600;
  font-size: 24px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.study-num img {
  height: 28px;
}
.study-num > span {
  height: 36px;
}
.study-text {
  color: #999;
  text-align: left;
}
.study-img {
  position: absolute;
  bottom: 0;
  right: 30px;
}
.home-middle {
  height: 655px;
}
.middle-left {
  width: 100%;
}
.middle-left /deep/ .ivu-tabs-nav-next,
.middle-left /deep/ .ivu-tabs-nav-prev {
  background: #fff;
  z-index: 2;
}
.middle-left /deep/ .ivu-tabs-nav-next {
  right: -4px;
}
.middle-left /deep/ .ivu-tabs-nav-prev {
  left: -4px;
}
.mygrades {
  display: flex;
  justify-content: space-between;
}
.mygrades > div:nth-child(2) {
  position: relative;
  top: -46px;
}
#grade {
  width: 100%;
}
#konwDiv {
  width: 100%;
  height: 418px;
}
#flagDiv {
  width: 100%;
  height: 418px;
}
.middle-right {
  width: 42%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
#competitive {
  width: 100%;
  height: 100%;
}
.home-bottom {
  margin-top: 20px;
}
.bottom-left {
  background-color: #fff;
  padding: 30px;
  height: 500px;
  border-radius: 10px;
}
.bottom-right {
  background-color: #fff;
  padding: 30px;
  height: 500px;
  border-radius: 10px;
  position: relative;
}
#knowledgepoints {
  width: 100%;
  height: 452px;
}
.classText {
  font-weight: 600;
  font-size: 20px;
  color: #333;
}
.expText {
  font-weight: 600;
  font-size: 20px;
  color: #333;
}
.videoText {
  font-weight: 600;
  font-size: 20px;
  color: #333;
}
#ringPre {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.class-exp-wrap {
  display: flex;
  justify-content: space-between;
}
.class-exp-top {
  display: flex;
  justify-content: flex-start;
  color: #999;
  align-items: center;
  min-width: 150px;
}
.class-exp-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  text-align: center;
}
.class-per {
  font-size: 20px;
  color: rgb(47, 112, 255);
  font-weight: 600;
  margin-bottom: 3px;
}
.class-exp-num {
  font-weight: 600;
  font-size: 22px;
  color: #333;
}
/* 右侧日历 */
.home-task {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: relative;
  top: -20px;
  /*transform: translateY(-20px);*/
}
.noticelistbox {
  position: relative;
  padding: 0 20px;
  margin-top: 20px;
  height: 758px;
  overflow: auto;
  padding-bottom: 10px;
  overflow-x: hidden;
}
.noticelistbox .noticelist {
  min-height: 300px;
}
.noticelistbox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.noticelistbox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #8686a6;
}
.noticelistbox::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: #cbcbd3;
}
.page {
  display: flex;
}
/deep/ .page .mini {
  margin: auto;
}
.listContend {
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px dashed #dcdee2;
  justify-content: space-between;
}
.imgstate {
  width: 30%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}
.imgstate div {
  margin-top: 16px;
  color: #000;
}
.listRigth {
  width: 70%;
}
.listRigth > div {
  /* width: 280px; */
  display: flex;
  margin-top: 14px;
  font-weight: 600;
}
.listRigth > div span {
  color: #999;
  margin-right: 20px;
  white-space: nowrap;
}
.listRigth > div div {
  width: 160px;
  color: #000;
  /* margin-right: 20px; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.listRigth > div div img {
  position: absolute;
  top: 0;
  right: 0px;
}
.out {
  cursor: pointer;
}
.userimg {
  width: 100px;
  min-height: 100px;
  margin: auto;
  margin-top: 14px;
}
.userimg img,
.imgbox {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 1px #fff solid;
}
.imgbox {
  display: flex;
  align-items: center;
}
.userimg div {
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  margin-top: 14px;
}
.filter {
  padding: 0 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right-circul {
  width: 10px;
  height: 20px;
  background-color: rgb(244, 247, 255);
  border-radius: 0 10px 10px 0;
}
.left-circul {
  width: 10px;
  height: 20px;
  background-color: rgb(244, 247, 255);
  border-radius: 10px 0 0 10px;
  float: right;
}
.calendar-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  height: 465px;
}
.calendar-week {
  margin: 0 auto;
  border-radius: 20px;
  background-color: rgb(244, 247, 255);
  display: flex;
  justify-content: flex-start;
}
.week-item {
  width: 14.2857142%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: rgb(47, 112, 255);
}
.calendar-view {
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.calendar-view:after {
  display: block;
  clear: both;
  content: '';
}
.date-li {
  width: 14.2857142%;
  height: 30px;
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
}
.date-view {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
.opacity-class {
  opacity: 0.5;
}
.todayBg {
  border: 2px solid rgb(47, 112, 255);
}
.handleDay {
  background: rgb(47, 112, 255) !important;
  color: #fff;
}
.date-mouth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 20px 0;
}
.date-mouth {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 30px;
}
.task-wrap {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.task-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.task-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.task-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.task-exam-name {
  cursor: pointer;
}
.task-exam-name:hover {
  color: rgb(47, 112, 255);
}
.defGraphWrap {
  width: 157px;
  height: 167px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.defGraph {
  margin-left: 10px;
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}
.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
</style>
<style>
#homer_Middle .ivu-tabs-tabpane {
  min-height: 418px;
  position: relative;
}
</style>
